<template>
  <div class="content">
    <el-card class="box-card" style="margin: 20px;">
      <div slot="header" class="clearfix header-box">
        <span>社区讨论</span>
      </div>
      <div class="box" v-for="(item,index) in communityList"  :index="index">
        <div class="top">
          <div class="avatar">
            <img :src="item.avatar" alt="" srcset="">
          </div>
          <div class="userinfo">
            <div class="nickname">{{ item.nickname }}</div>
            <div class="post">{{ item.post }} - {{ item.post_age }}</div>
          </div>
        </div>
        <div class="title"><strong>{{ item.title }}</strong></div>
        <div class="content">{{ item.content }}</div>
        <div class="list">
          <div class="item"><svg t="1701519228443" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="1344" width="16" height="16">
              <path
                d="M873.94 426.71c-0.67-29.39-6.92-57.79-18.55-84.4-12.11-27.76-29.49-52.34-51.59-73.01-21.09-19.92-44.65-34.97-70-44.73-27.46-10.56-55.56-14.3-83.52-11.11-85.22 9.72-146.06 79.14-186.31 125.08-7.79 8.89-14.51 16.56-20.3 22.51-7.7 7.92-7.53 20.58 0.38 28.28 7.92 7.7 20.58 7.53 28.28-0.38 6.52-6.7 13.56-14.74 21.72-24.05 36.2-41.31 90.89-103.73 160.76-111.7 41.8-4.77 86.09 11.7 121.6 45.24 18.16 16.99 32.4 37.13 42.33 59.87 9.54 21.83 14.66 45.15 15.21 69.31 0.55 23.89-3.48 47.33-11.97 69.63-8.8 22.96-15.44 35.36-39.76 68.13-77.16 103.54-130.31 160.9-195.86 211.34-28.53 18.93-44.17 22.25-73.52 22.1-24.18-0.13-48.89-10.55-71.48-30.12l-0.19-0.16c-78.55-66.38-137.21-120.85-204.62-202.86-22.58-27.33-27.56-40.33-36.6-63.94l-0.52-1.37c-7.3-19.16-10.66-43.61-9.99-72.67 0.55-24.21 5.67-47.56 15.23-69.42 9.86-22.67 24.13-42.83 42.39-59.92 0.13-0.12 0.25-0.24 0.38-0.36 33.12-30.13 69.9-46.51 106.37-47.37 33.33-0.79 64.98 11.87 89.18 35.64 7.88 7.74 20.54 7.63 28.28-0.25 7.74-7.88 7.63-20.54-0.25-28.28-31.98-31.41-73.95-48.13-118.15-47.09-46.39 1.09-92.29 21.19-132.73 58.12-0.23 0.21-0.45 0.42-0.67 0.64-22.15 20.79-39.47 45.33-51.47 72.9-11.64 26.62-17.88 55.05-18.55 84.49-0.79 34.26 3.45 63.8 12.61 87.86l0.54 1.4c9.85 25.73 16.36 42.73 43.08 75.07 69.27 84.29 129.31 140.07 209.57 207.9 29.87 25.86 63.54 39.63 97.37 39.81 0.68 0 1.35 0.01 2.02 0.01 33.61 0 57.83-4.77 94.46-29.19 0.37-0.25 0.74-0.51 1.09-0.78 69-53 124.32-112.51 204.13-219.6 25.03-33.72 34.29-49.7 45.03-77.73 10.35-27.21 15.26-55.75 14.59-84.84z"
                p-id="1345"></path>
              <path
                d="M718.75 540.74c3.59 2.68 7.79 3.97 11.95 3.97 6.1 0 12.12-2.78 16.04-8.04 25.43-34.08 38.27-68.69 38.16-102.88-0.09-27.66-8.58-54.57-25.25-79.98-6.06-9.24-18.46-11.81-27.69-5.75-9.24 6.06-11.81 18.46-5.75 27.69 12.35 18.82 18.64 38.39 18.7 58.16 0.08 25.33-10.09 51.86-30.22 78.83-6.62 8.87-4.8 21.4 4.06 28zM702.54 295.9c-5.5-3.85-9.07-5.95-9.46-6.18-9.52-5.56-21.73-2.35-27.31 7.17-5.58 9.51-2.39 21.76 7.11 27.36 0.03 0.02 2.6 1.54 6.71 4.42 3.49 2.45 7.49 3.62 11.45 3.62 6.3 0 12.51-2.97 16.4-8.53 6.34-9.05 4.14-21.52-4.9-27.86z"
                p-id="1346"></path>
            </svg><span>{{ item.like }}</span></div>
          <div class="item"><svg t="1701519199091" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="1198" width="16" height="16">
              <path
                d="M751.08 246H272.44c-45.83 0-83.11 37.28-83.11 83.11v272.21c0 45.83 37.28 83.11 83.11 83.11h139.28l85.72 87.87c3.76 3.86 8.93 6.03 14.32 6.03s10.55-2.18 14.32-6.03l85.72-87.87h139.28c45.83 0 83.11-37.28 83.11-83.11V329.11c0-45.83-37.28-83.11-83.11-83.11z m43.11 355.32c0 23.77-19.34 43.11-43.11 43.11H603.37a20.05 20.05 0 0 0-14.32 6.03l-77.29 79.23-77.29-79.23a19.992 19.992 0 0 0-14.32-6.03H272.44c-23.77 0-43.11-19.34-43.11-43.11V329.11c0-23.77 19.34-43.11 43.11-43.11h478.65c23.77 0 43.11 19.34 43.11 43.11v272.21z"
                p-id="1199"></path>
              <path
                d="M378.82 432.63c-18.84 0-34.11 15.27-34.11 34.11s15.27 34.11 34.11 34.11 34.11-15.27 34.11-34.11-15.27-34.11-34.11-34.11zM511.3 432.63c-18.84 0-34.11 15.27-34.11 34.11s15.27 34.11 34.11 34.11 34.11-15.27 34.11-34.11-15.27-34.11-34.11-34.11zM643.78 432.63c-18.84 0-34.11 15.27-34.11 34.11s15.27 34.11 34.11 34.11 34.11-15.27 34.11-34.11-15.27-34.11-34.11-34.11z"
                p-id="1200"></path>
            </svg><span>{{ item.comments }}</span></div>
          <div class="item"><svg t="1701519169177" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="1053" width="16" height="16">
              <path
                d="M224.94 813.36c-6.69 0-13.47-1.41-19.96-4.32-19.04-8.52-30.23-27.44-28.53-48.19 0.19-2.37 0.41-4.08 0.51-4.83 1.36-12.07 7.44-54.68 29.59-112.4 14.46-37.62 32.71-72.58 54.26-103.93 27.38-39.65 59.92-73.91 96.77-101.88 9.34-7.73 76.59-61.43 170.59-86.98v-59.34c0-22.02 12.57-41.09 32.82-49.77s42.72-4.63 58.67 10.56l199.82 190.34c15.82 15.07 24.53 35.4 24.53 57.24 0 21.85-8.71 42.17-24.53 57.24L619.65 747.48c-15.95 15.19-38.43 19.24-58.67 10.56-20.24-8.67-32.82-27.74-32.82-49.77v-47.71c-20.67 4.04-40.97 8.95-60.6 14.66-40.38 11.77-77.42 26.68-110.06 44.3-36.29 19.66-64.79 41.98-92.29 72.3-0.9 1.15-2.82 3.56-5.59 6.47-9.38 9.87-21.85 15.07-34.68 15.07z m39.93-21.15c-0.02 0.02-0.04 0.04-0.06 0.07 0.01-0.03 0.03-0.05 0.06-0.07z m-48.27-30.89s-0.15 1.09-0.29 2.81c-0.42 5.17 2.96 7.49 5.01 8.41 1.99 0.89 5.85 1.84 9.3-1.79 1.6-1.69 2.68-3.05 3.26-3.79 0.36-0.46 0.74-0.94 1.26-1.51 30.39-33.6 63.23-59.37 103.33-81.1 35.14-18.97 74.81-34.96 117.91-47.52 28.51-8.29 58.31-14.98 88.58-19.89 5.79-0.94 11.7 0.71 16.16 4.51 4.47 3.8 7.04 9.37 7.04 15.23v71.6c0 8.42 5.99 11.89 8.57 13 2.58 1.1 9.23 3.05 15.33-2.76l199.82-190.34c7.81-7.44 12.12-17.49 12.12-28.28 0-10.79-4.3-20.83-12.12-28.28L592.06 281.27c-6.09-5.81-12.75-3.86-15.33-2.76s-8.57 4.58-8.57 13v74.93c0 9.32-6.44 17.4-15.52 19.49-94.41 21.72-162.4 76.72-169.84 82.92-0.24 0.2-0.48 0.39-0.73 0.58-33.6 25.44-63.32 56.72-88.34 92.96-19.75 28.73-36.54 60.89-49.86 95.57-20.59 53.67-26.03 92.21-27.2 102.74-0.02 0.21-0.04 0.41-0.07 0.62z m0 0z"
                p-id="1054"></path>
            </svg><span>分享</span></div>
          <div class="item"><svg t="1701519242778" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="1490" width="16" height="16">
              <path
                d="M840.6 474.98c15.78-15.38 21.35-37.96 14.54-58.92s-24.59-35.95-46.4-39.12l-153.43-22.3c-5.69-0.83-10.61-4.4-13.16-9.56l-68.62-139.03c-9.75-19.76-29.5-32.04-51.54-32.04s-41.79 12.28-51.54 32.04l-68.62 139.03a17.475 17.475 0 0 1-13.16 9.56l-153.43 22.3c-21.81 3.17-39.59 18.16-46.4 39.12s-1.24 43.54 14.54 58.92L314.42 583.2c4.12 4.02 6 9.8 5.03 15.47l-26.21 152.81c-3.73 21.72 5.04 43.26 22.87 56.21 17.83 12.95 41.02 14.63 60.53 4.38l137.23-72.15a17.447 17.447 0 0 1 16.26 0l137.24 72.15c8.48 4.46 17.67 6.66 26.8 6.66 11.87 0 23.66-3.72 33.73-11.04 17.83-12.95 26.59-34.49 22.87-56.21l-26.21-152.81c-0.97-5.67 0.91-11.45 5.03-15.47L840.6 474.98zM685.13 605.43l26.21 152.81c1.66 9.66-4.31 15.17-6.95 17.09-2.64 1.92-9.72 5.89-18.4 1.33l-137.24-72.15a57.495 57.495 0 0 0-53.49 0l-137.23 72.15c-8.68 4.57-15.76 0.59-18.4-1.33-2.64-1.92-8.61-7.43-6.95-17.09l26.21-152.81a57.444 57.444 0 0 0-16.53-50.87L231.32 446.33c-7.02-6.84-5.43-14.81-4.42-17.92 1.01-3.11 4.4-10.48 14.11-11.89l153.43-22.3a57.48 57.48 0 0 0 43.28-31.44l68.62-139.03c4.34-8.79 12.4-9.74 15.67-9.74s11.33 0.95 15.67 9.74l68.62 139.03a57.446 57.446 0 0 0 43.28 31.44L803 416.53c9.7 1.41 13.1 8.79 14.11 11.89 1.01 3.11 2.6 11.07-4.42 17.92L701.66 554.56a57.444 57.444 0 0 0-16.53 50.87z"
                p-id="1491"></path>
              <path
                d="M626.33 422.04c-13.13-0.88-23.93-5.05-32.1-12.42-5.66-5.11-8.24-10.19-8.69-11.13-0.28-0.77-0.42-1-0.84-1.8l-31-59c-5.14-9.78-17.23-13.54-27.01-8.4-9.78 5.14-13.54 17.23-8.4 27.01L549 414.75c3.57 7.79 22.78 43.74 74.66 47.2 0.45 0.03 0.9 0.04 1.35 0.04 10.44 0 19.23-8.1 19.94-18.67 0.74-11.01-7.6-20.54-18.62-21.28z"
                p-id="1492"></path>
              <path d="M690 451m-20 0a20 20 0 1 0 40 0 20 20 0 1 0-40 0Z" p-id="1493"></path>
            </svg><span>{{ item.collect }}</span></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCommunityAPI } from '@/api/community.js'
export default {
  name: 'communtiy',
  data() {
    return {
      communityList:[]
    };
  },
  methods: {
   async getCommunityFn(){
    const res = await getCommunityAPI()
    console.log(res);
    if(res.status !==200){
      console.log('获取数据失败!');
    }else{
      console.log('获取数据成功!');
      this.communityList = res.data.data
    }
   }
  },
  created() {
    this.getCommunityFn()
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
}

.content {
  width: 60%;
  margin: auto;


  .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .box {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 5px auto;
    border-bottom: solid 1px rgb(237, 238, 240);

    .top {
      width: 100%;
      height: 60px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 90px;
        margin-right: 10px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 90px;
        }
      }

      .userinfo {
        width: calc(100% - 55px);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.825em;

        .nickname {
          width: 100%;
          height: 50%;
          line-height: 35px;
        }

        .post {
          width: 100%;
          height: 50%;
          color: rgb(116, 118, 128);
        }
      }
    }

    .title {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
    }

    .content {
      width: 100%;
      height: auto;
      margin-bottom: 20px;
      font-size: 15px;
      line-height: 22px;
    }

    .list {
      width: 100%;
      height: 40px;
      display: flex;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-direction: row;
      color: rgb(116, 118, 128);

      .item {
        width: 60px;
        height: 100%;
        display: flex;
        align-items: center;

        span {
          font-size: 0.825em;
        }

      }
    }
  }
}
</style>